import { Button, Card, Input, message, Modal, Table } from "antd";
import React from "react";
import { formatMessage } from 'umi-plugin-react/locale';
import testData from "../resourceManage/testData";
import DiscountModal from "./discountModal";
import { discountDelete, discountList } from "@/services/chargingManage";
import moment from "moment";


class DiscountManage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      search:"",
      loading:false,
      list:[],
      total:0,
      selectedRowKeys:[]
    }
  }

  componentDidMount(){
    this.getList()
  }
  
  getList = () => {
    this.setState({loading:true},async () => {
      const { current,size } = this.state;
      const res = await discountList({current,size})
      this.setState({
        loading:false,
        list:res.records,
        total:res.total
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  openModal = data => {
    this.DiscountModal.initModal(data)
  }

  removeConfirm = id => {
    Modal.confirm({
      title:formatMessage({ id: 'chargingManage.discountManage.index.confirmDelete' }),
      okText:formatMessage({ id: 'chargingManage.discountManage.index.confirm' }),
      cancelText:formatMessage({ id: 'chargingManage.discountManage.index.cancel' }),
      okType:"danger",
      onOk:() => {
        this.doRemove(id)
      }
    })
  }

  doRemove = async id => {
    const res = await discountDelete({id})
    if(res.code == -1){return false}
    message.info(res.message)
    this.getList()
  }

  onSelectChange = selectedRowKeys => {
    this.setState({selectedRowKeys})
  }

  render(){
    const { current,size,search,loading,list,total,selectedRowKeys } = this.state;
    const columns = [
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.code' }),
        dataIndex:"code",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.discountPlan' }),
        dataIndex:"name",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.type' }),
        dataIndex:"type",
        width:100,
        render:type => {
          return type == 0 ? formatMessage({ id: 'chargingManage.discountManage.index.discountAllowance' }) : type == 1 ? formatMessage({ id: 'chargingManage.discountManage.index.promotionCode' }) : type == 2 ? formatMessage({ id: 'chargingManage.discountManage.index.voucher' }) : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.amount' }),
        dataIndex:"price",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.discountRate' }),
        dataIndex:"rate",
        width:100,
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.settlementParty' }),
        dataIndex:"settlementName",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.validPeriod' }),
        dataIndex:"week",
        width:220,
        render:(text,row) => {
          const startDate = row.startDate ? moment(row.startDate).format("YYYY-MM-DD") : ''
          const endDate = row.endDate ? moment(row.endDate).format("YYYY-MM-DD") : ''
          return startDate + '~' + endDate
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.qrCode' }),
        dataIndex:"qrCode",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.useDate' }),
        dataIndex:"codeUseTime",
        width:100,
        render:time => {
          return time ? moment(time).format("YYYY-MM-DD HH:mm:ss") : ''
        }
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.actualUsageAmount' }),
        dataIndex:"usePrice",
        width:120
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.currentBalance' }),
        dataIndex:"remainingPrice",
        width:100
      },
      {
        title:formatMessage({ id: 'chargingManage.discountManage.index.operation' }),
        width:160,
        fixed:"right",
        render:(text,row) =>  {
          return (
            <div>
              <Button type="primary" style={{marginRight:8}} size="small" onClick={() => this.openModal(row)}>{formatMessage({ id: 'chargingManage.discountManage.index.edit' })}</Button>
              <Button type="danger" size="small" onClick={() => this.removeConfirm(row.id)}>{formatMessage({ id: 'chargingManage.discountManage.index.delete' })}</Button>
            </div>
          )
        }
      }
    ]

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };

    return (
      <Card bordered={false} style={{minHeight:"100%"}}>
        <div className="topOptionBox">
          <div>
            <Button type="primary" onClick={() => this.openModal()} style={{marginRight:8}}>{formatMessage({ id: 'chargingManage.discountManage.index.addDiscountPlan' })}</Button>
            <Button style={{marginRight:8}} disabled>{formatMessage({ id: 'chargingManage.discountManage.index.applySpecialDiscount' })}</Button>
            <Button style={{marginRight:8}} disabled>{formatMessage({ id: 'chargingManage.discountManage.index.lockEnable' })}</Button>
            <Button disabled>{formatMessage({ id: 'chargingManage.discountManage.index.applyExtension' })}</Button>
          </div>
        </div>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          scroll={{x:"auto"}}
          pagination={{
            current,
            pageSize:size,
            showQuickJumper:true,
            onChange:this.doSearch,
            total
          }}
          rowSelection={rowSelection}
        />

        <DiscountModal onRef={ref => this.DiscountModal = ref} refreshList={this.getList} />

        
      </Card>
    )
  }
}

export default DiscountManage